<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入主题样式 -->
<link
	href="${pageContext.request.contextPath }/themes/bootstrap/easyui.css"
	rel="stylesheet">
<!-- 引入图标的样式 -->
<link href="${pageContext.request.contextPath }/themes/icon.css"
	rel="stylesheet">
<!-- 先引入jquery -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.7.2.js"></script>
<!-- 引入easyui.js -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/Chart.min.js"></script>
</head>

<body>
	<canvas id="myChart" width="1000px" height="400px"></canvas>
	<input id="systemUser" type="hidden">
	<input id="knowledgeUser" type="hidden">
	<input id="user" type="hidden">
	
	<script type="text/javascript">
		$(function(){
			$.ajax({
				url:'countUser',
				type:'post',
				data:{
					
				},
				dataType:'text',
				success:function(data){
					var data = eval('('+data+')');
					
					var ctx = document.getElementById("myChart").getContext("2d");
					var data =  {
							datasets: [{
						        data: [data.systemUser, data.knowledgeUser, data.user],
						        backgroundColor:['#FF1493','#7B68EE','#00FF00']
						    }],
						    labels: [
						        '系统管理员',
						        '知识管理员',
						        '普通用户'
						    ]
					}
					var options = {					   
					};
					
					new Chart(ctx, {
					    type: 'pie',
					    data: data,
					    options: options
					});
				}
			})
		})
	</script>
</body>
</html>